import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false,
        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body:const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {

 const  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      // height: double.infinity,
      decoration: const BoxDecoration(
        color: Colors.black26,
      ),
      child:Flex(
        direction:Axis.horizontal,
        //次轴的排列策略，针对的是父级widget(相对布局)
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(flex: 3, child: IconContainer(icon: Icons.home, color: Colors.yellow),),
          Expanded(flex: 2, child: IconContainer(icon: Icons.person, color: Colors.green),),
          Expanded(flex: 1, child: IconContainer(icon: Icons.ac_unit_sharp, color: Colors.blue),),
        ],
      ) ,
    ) ;
  }
}

class IconContainer extends StatelessWidget {

  late IconData icon;

  late Color color;

  IconContainer({super.key,required this.icon,required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: 120,
      width: 120,
      decoration: BoxDecoration(
        color: Colors.red,
        border: Border.all(
          color: Colors.black,
          width: 1,
        ),
      ),
      child: Icon(icon,color: color,),
    );
  }
}

